<template>
  <view class="login-container">
    <view class="login-form">
      <view class="title">用户登录</view>
      
      <view class="input-group">
        <input 
          type="text" 
          v-model="loginForm.username" 
          placeholder="请输入用户名" 
          class="input"
          autocomplete="off"
          :class="{ 'input-focus': usernameFocus }"
          @focus="usernameFocus = true"
          @blur="usernameFocus = false"
        />
      </view>
      
      <view class="input-group">
        <input 
          type="password" 
          v-model="loginForm.password" 
          placeholder="请输入密码" 
          class="input"
          autocomplete="new-password"
          :class="{ 'input-focus': passwordFocus }"
          @focus="passwordFocus = true"
          @blur="passwordFocus = false"
        />
      </view>
      
      <button 
        class="login-btn" 
        @click="submitLogin"
        :disabled="isSubmitting"
      >
        {{ isSubmitting ? '登录中...' : '登录' }}
      </button>
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      usernameFocus: false,
      passwordFocus: false,
      isSubmitting: false
    }
  },
  onLoad() {
    uni.setNavigationBarBackButtonHidden({ hidden: true })
    uni.setNavigationBarTitle({ title: '登录' })
  },
  methods: {
    ...mapMutations(['login']),
    submitLogin() {
      if (!this.loginForm.username.trim()) {
        this.showToast('请输入用户名')
        return
      }
      if (!this.loginForm.password.trim()) {
        this.showToast('请输入密码')
        return
      }
      
      this.isSubmitting = true
      // 模拟登录验证
      if (this.loginForm.username === 'lyc' && this.loginForm.password === '123456') {
        this.showLoading('登录中...')
        setTimeout(() => {
          this.hideLoading()
          this.showToast('登录成功', 'success')
          this.login(this.loginForm.username)  // 更新Vuex状态
          this.isSubmitting = false
          // 跳转到用户页面（tabBar页面）
          uni.switchTab({
            url: '/pages/tabBar/user/user'
          })
        }, 1000)
      } else {
        this.showToast('用户名或密码错误')
        this.loginForm.password = ''
        this.isSubmitting = false
      }
    },
    showToast(title, icon = 'none') {
      uni.showToast({ title, icon, duration: 2000 })
    },
    showLoading(title) {
      uni.showLoading({ title, mask: true })
    },
    hideLoading() {
      uni.hideLoading()
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background-color: #f2f3f5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
}

.login-form {
  width: 100%;
  max-width: 500rpx;
  background-color: #fff;
  padding: 60rpx 40rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.login-form:active {
  transform: scale(0.995);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 60rpx;
  letter-spacing: 2rpx;
}

.input-group {
  margin-bottom: 30rpx;
}

.input {
  width: 100%;
  height: 90rpx;
  padding: 0 20rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.input-focus {
  border-color: #007aff;
  box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
}

.input:focus {
  outline: none;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 30rpx;
  border-radius: 8rpx;
  margin-top: 20rpx;
  transition: background-color 0.3s ease;
}

.login-btn:not(:disabled):active {
  background-color: #0066cc;
}

.login-btn:disabled {
  background-color: #99c8ff;
  opacity: 0.8;
}
</style>